<template>
  <view class="gg-nav-col" @tap="jump" v-bind:style="ggNavColStyle">
    <view class="gg-nav-col-img-area" v-bind:style="ggNavImgAreaStyle">
      <view class="gg-nav-col-img-box">
        <view class="gg-nav-col-img-main">
          <view class="gg-nav-img-pla" v-if="isViewPla === true"></view>
          <slot name="default" />
          <image class="gg-nav-col-img" v-bind:style="ggNavImgStyle" @load="onImgLoad" :src="img" v-if="!$slots.default"></image>
        </view>
      </view>
    </view>
    <view class="gg-nav-col-label">
      {{label}}
    </view>
  </view>
</template>

<script>
export default {
  name: "GgBox",
  options: {
    addGlobalClass: true,
  },
  inject: {
    ggGroupCol: {
      default() {
        return null
      }
    }
  },
  props: {
    /* 预留参数 用于接收子级 gg-col间距参数 */
    img: {
      type: String,
      default: ''

    },
    label: {
      type: String,
      default: ''
    },
    url: {
      type: String,
      default() {
        return '';
      }
    },
    urlType: {
      type: String,
      default() {
        return 'navigateTo';
      }
    },
    col: {
      type: [String, Number],
      default: ''
    },
    imgMaxSize: {
      type: [String, Number],
      default: 40
    },
    imgPadding: {
      type: [String, Number],
      default() {
        return 0;
      }
    }
  },
  watch: {
    imgLoad() {
      this._changeIsViewPla();
    }
  },
  data() {
    return {
      ggNavColStyle: '',
      ggNavImgAreaStyle: '',
      ggNavImgStyle: '',
      imgLoad: false,
      isViewPla: true,
    };
  },
  created: function () {
    this._dealStyle();
    this._changeIsViewPla();

  },
  methods: {
    _changeIsViewPla() {
      /* #ifndef MP_WEIXIN */
      this.isViewPla = (!this.$slots.default && !this.img) || (this.imgLoad === false && this.img) ? true : false;
      /* #endif */
      /* #ifdef MP_WEIXIN */
      this.isViewPla = (this.imgLoad === false && this.img) ? true : false;
      /* #endif */

    },
    _dealStyle() {
      let col = this.col ? this.col : this.ggGroupCol;

      if (col > 0) {
        this.ggNavColStyle = 'width: calc(100% / ' + col + ' - 10px)';
      }
      let ggNavImgAreaStyle = 'max-width:' + this.imgMaxSize + 'px;';
      this.ggNavImgAreaStyle = ggNavImgAreaStyle;
      if (this.imgPadding) {
        //自定义图片内边框，为了解决图片规格不同所用，然后图片的宽高要去掉padding的大小哦
        const imgPadding = this.imgPadding;
        let ggNavImgStyle = '';
        ggNavImgStyle = 'padding:' + this.imgPadding + 'px;'
        ggNavImgStyle += 'width:calc(100% - ' + this.imgPadding * 2 + 'px);'
        ggNavImgStyle += 'height:calc(100% - ' + this.imgPadding * 2 + 'px);'
        this.ggNavImgStyle = ggNavImgStyle;
      }
    },
    jump() {
      if (typeof this.url == 'string' && this.url) {
        const url = this.url;
        switch (this.urlType) {
          case 'redirectTo'://关闭当前页面，跳转到应用内的某个页面。
            uni.redirectTo({
              url: this.url
            });
            break;
          case 'reLaunch'://关闭所有页面，打开到应用内的某个页面。
            uni.reLaunch({
              url: this.url
            });
            break;
          case 'switchTab'://跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
            uni.switchTab({
              url: this.url
            });
            break;
          default://默认【navigateTo】 保留当前页面，跳转到应用内的某个页面
            uni.navigateTo({
              url: this.url
            });
        }

      } else {
        this.$emit('click')
      }
    },
    /* 监听图片加载成功 */
    onImgLoad(e) {
      this.imgLoad = true;
    }
  }
};
</script> 
<style >
/* #ifdef MP-WEIXIN */
gg-nav-col {
  display: contents;
}
/* #endif */
.gg-nav-col {
  width: calc(100% - 10px);
  margin: 5px 5px;
  display: inline-flex;
  flex-direction: column;
}
.gg-nav-col-img-area {
  width: 100%;
  max-width: 40px;
  text-align: center;
  margin: 0 auto;
}
.gg-nav-col-img-box {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  position: relative;
}
.gg-nav-col-img-main {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.gg-nav-img-pla {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #99999944;
  position: absolute;
  top: 0%;
  left: 0%;
}
.gg-nav-col-img {
  width: 100%;
  height: 100%;
}
.gg-nav-col-label {
  font-size: 12px;
  color: #666666;
  text-align: center;
}
</style>
